<script lang='ts' setup name='App'>
import { ref } from "vue";

const containter = ref()//代表页面的dom元素

function invoke(event: Event) {
      console.log("按钮被点击了");
      const h3 = document.createElement("h3");
      h3.innerHTML = '当前时间: ' + new Date()
      containter.value.append(h3)
}

//键盘的事件
function inputChange(inputName: string, event: Event) {
      // console.log(event)
      // const data = event.data;

      const inputEvent = event as InputEvent
      const { data } = inputEvent;
      console.log("inputName", inputName);

      console.log(data)


}

function clickHref(event: Event) {
      console.log("超链接被点击了。。。。");
      //阻止事件的默认行为
      event.preventDefault()

}

//点击外部的div触发
function clickOuter() {
      console.log("【外部】的div被点击了.....");
}

function clickInner(event:Event) {

      console.log("[内部]的div被点击了.....");
      //事件消耗掉
      event.stopPropagation()

}

</script>

<template>

      <button @click="invoke">点我执行一句话</button> <br>
      <input type="text" @input="inputChange('input-1', $event)"> <br>
      <input type="text" @input="inputChange('input-2', $event)"><br>

      <a href="http://www.baidu.com" target="_blank" @click="clickHref($event)">Baidu</a>
      <div ref="containter" class="containter" @click="clickOuter">
            <div class="child" @click="clickInner($event)"></div>
      </div>

</template>


<style>
.containter {

      border: solid 1px grey;
      width: 300px;
      height: 200px;
      box-shadow: 0 0 10px skyblue;
      cursor: pointer;
}

.child {
      margin: 40px;
      border: solid 1px grey;
      width: 100px;
      height: 100px;
      box-shadow: 0 0 10px orange;
      cursor: pointer;
}
</style>